<template>
  <ul class="approvalUsers" v-if="Array.isArray(lists) && lists.length > 0">
    <li v-for="(item,index) in lists" :key="index"
        :style="{width: span}"
        :class="{active:item.status===3,pre:item.status===1,next:item.status===0}">
      <p class="title">{{ item.progressCode }}</p>
      <div class="imgWrap">
        <img v-if="item.status==1 && $i18n.locale ==='zh_CN'" src="../../../../assets/images/workorder/approved.png"
             alt="">
        <img v-if="item.status==1 && $i18n.locale ==='en_US'" src="../../../../assets/images/workorder/approved_en.png"
             alt="">
      </div>
      <p class="name">{{ item.createBy }}</p>
      <p class="time">{{ item.createTime }}</p>
    </li>
  </ul>
</template>

<script>
export default {
  name: "approvalUsers",
  props: ['list', 'activeCode','span','disabled'],
  data() {
    return {
      lists: []
    }
  },
  mounted() {
    let activeCode = ''
    if (Array.isArray(this.list)) {
      this.lists = this.list.map(item => {
        if (item.status == 0 && !activeCode && !this.disabled) {
          activeCode = item.progressCode
          item.status = 3
        }
        return item;
      })

      this.$emit('update:activeCode', activeCode)
    }
  }
}
</script>
<style lang="scss" scoped>
.approvalUsers {
  padding: 20px 0;

  li {
    display: inline-block;
    width: 15%;
    text-align: center;
    vertical-align: top;

    img {
      width: auto;
      height: 91px;
    }

    .imgWrap {
      width: 60%;
      margin: 0 auto;
    }

    .title {
      font-size: 16px;
      color: #333;
      font-weight: bold;
      padding-bottom: 15px;
      height: 50px;
    }

    .name {
      padding: 15px 0;
    }

    .time {
      position: static;
    }

    &.pre {
      p {
        color: #035BEC;
      }
    }

    &.active {
      p {
        color: rgb(254, 198, 76);
      }
    }

    &.next {
      p {
        color: rgba(51, 65, 100, 0.5);
      }
    }
  }
}
</style>
